<template>
  <view class="px-2 box-border">
    <view class="edit-personal-info-form" style="width: 100%">
      <up-form
        labelPosition="left"
        :model="form"
        :rules="rules"
        ref="uForm"
        labelWidth="75"
      >
        <up-form-item label="账号" borderBottom>
          <up-input
            v-model="form.vxPhone"
            border="none"
            color="#707070"
            inputAlign="right"
            disabled
          ></up-input>
        </up-form-item>
        <up-form-item label="类型" prop="residenceStatus" borderBottom>
          <up-radio-group v-model="form.residenceStatus" placement="row">
            <up-radio activeColor="#0189FE" :name="0" label="常住"></up-radio>
            <up-radio activeColor="#0189FE" :name="1" label="暂住"></up-radio>
          </up-radio-group>
        </up-form-item>
        <up-form-item label="姓名" prop="userName" borderBottom>
          <up-input
            v-model="form.userName"
            border="none"
            color="#707070"
            inputAlign="right"
            disabled
          ></up-input>
        </up-form-item>
        <up-form-item label="身份证号" prop="idCard" borderBottom>
          <up-input
            v-model="form.idCard"
            border="none"
            color="#707070"
            inputAlign="right"
            disabled
          ></up-input>
        </up-form-item>
        <up-form-item label="联系电话" prop="phonenumber" borderBottom>
          <up-input
            v-model="form.phonenumber"
            border="none"
            color="#000000"
            inputAlign="right"
            placeholderStyle="{color: '#707070'}"
            clearable
          ></up-input>
        </up-form-item>
        <up-form-item label="居住地：" prop="communityId">
          <view class="flex flex-wrap justify-between mt-2.5">
            <view class="disable-input" style="width: 26%">
              <up-input
                v-model="form.region"
                border="none"
                color="#707070"
                disabled
              ></up-input>
            </view>
            <view class="disable-input" style="width: 32%">
              <up-input
                v-model="form.street"
                border="none"
                color="#707070"
                disabled
              ></up-input>
            </view>
            <view
              class="select-input-bg-white"
              style="width: 40%"
              @click="showCommunity = true"
            >
              <up-input
                v-model="form.communityName"
                placeholder="社区名称"
                border="none"
                disabled
                disabledColor="#ffffff"
                placeholderStyle="{color: '#707070'}"
                suffixIcon="arrow-down"
                :suffixIconStyle="{ color: '#777777', fontSize: '20rpx' }"
              ></up-input>
            </view>
          </view>
        </up-form-item>
        <up-form-item label="" prop="buildingId">
          <view class="flex flex-wrap justify-between">
            <view
              class="select-input-bg-white"
              style="width: 38%"
              @click="showStreet = true"
            >
              <up-input
                v-model="form.alleyName"
                placeholder="街路巷"
                border="none"
                disabled
                disabledColor="#ffffff"
                placeholderStyle="{color: '#707070'}"
                suffixIcon="arrow-down"
                :suffixIconStyle="{ color: '#777777', fontSize: '20rpx' }"
              ></up-input>
            </view>
            <!-- <view
              class="select-input-bg-white"
              style="width: 34%"
              @click="showPlot = true"
            >
              <up-input
                v-model="form.subdistrict"
                placeholder="小区名称"
                border="none"
                disabled
                disabledColor="#ffffff"
                placeholderStyle="{color: '#707070'}"
                suffixIcon="arrow-down"
                :suffixIconStyle="{ color: '#777777', fontSize: '20rpx' }"
              ></up-input>
            </view> -->
            <view
              class="select-input-bg-white"
              style="width: 60%"
              @click="showBuild = true"
            >
              <up-input
                v-model="form.building"
                placeholder="门楼牌号"
                border="none"
                disabled
                disabledColor="#ffffff"
                placeholderStyle="{color: '#707070'}"
                suffixIcon="arrow-down"
                :suffixIconStyle="{ color: '#777777', fontSize: '20rpx' }"
              ></up-input>
            </view>
          </view>
        </up-form-item>
        <up-form-item label="    " labelWidth="0">
          <view class="flex flex-wrap justify-between">
            <view class="input-bg-white" style="width: 100%">
              <up-input
                v-model="form.house"
                border="none"
                color="#000000"
                placeholder="输入户号 例如:1-1"
                placeholderStyle="{color: '#707070'}"
                clearable
              ></up-input>
            </view>
          </view>
        </up-form-item>
      </up-form>
    </view>
    <!-- 社区 -->
    <up-action-sheet
      :show="showCommunity"
      :actions="communitys"
      title="请选择社区"
      @close="showCommunity = false"
      @select="communitySelect"
    >
    </up-action-sheet>
    <!-- 街路巷 -->
    <up-action-sheet
      :show="showStreet"
      :actions="streets"
      title="请选择街路巷"
      @close="showStreet = false"
      @select="streetSelect"
    >
    </up-action-sheet>
    <!-- 小区 -->
    <up-action-sheet
      :show="showPlot"
      :actions="plots"
      title="请选择小区"
      @close="showPlot = false"
      @select="plotSelect"
    >
    </up-action-sheet>
    <!-- 门楼牌号 -->
    <up-action-sheet
      :show="showBuild"
      :actions="buildings"
      title="请选择门楼牌号"
      @close="showBuild = false"
      @select="buildSelect"
    >
    </up-action-sheet>
    <button
      class="btn-0189FE h-[83rpx] leading-[83rpx] text-[33rpx] mt-[80rpx]"
      @click="onsubmit"
    >
      保 存
    </button>
    <up-toast ref="uToastRef"></up-toast>
  </view>
</template>

<script setup lang="ts">
import {
  communityGroup,
  selectAlleyList,
  selectSubdistrictList,
  selectBuildingList,
} from "@/api/community/index";
import { updateCrowdUser, crowdUserInfo } from "@/api/user";
import { useUserInfoStore } from "@/stores/userInfo";
const userInfoStore = useUserInfoStore();

const uToastRef = <any>ref(null);
const uForm = <any>ref(null);
const data = reactive({
  showCommunity: false,
  communitys: <any>[],
  showStreet: false,
  streets: <any>[],
  showPlot: false,
  plots: <any>[],
  showBuild: false,
  buildings: <any>[],
  form: {
    residenceStatus: userInfoStore.crowdInfo.residenceStatus,
    address: userInfoStore.crowdInfo.address,
    communityId: userInfoStore.crowdInfo.communityId,
    crowdUserId: userInfoStore.crowdInfo.crowdUserId,
    alleyName: userInfoStore.crowdInfo.alleyName,
    alleyId: userInfoStore.crowdInfo.alleyId,
    subdistrict: userInfoStore.crowdInfo.subdistrict,
    subdistrictId: userInfoStore.crowdInfo.subdistrictId,
    building: userInfoStore.crowdInfo.building,
    buildingId: userInfoStore.crowdInfo.buildingId,
    house: userInfoStore.crowdInfo.house,
    phonenumber: userInfoStore.crowdInfo.phonenumber,
    region: userInfoStore.crowdInfo.region,
    street: userInfoStore.crowdInfo.street,
    userName: userInfoStore.crowdInfo.userName,
    idCard: userInfoStore.crowdInfo.idCard,
    communityName: userInfoStore.crowdInfo.communityName,
    vxPhone: userInfoStore.crowdInfo.vxPhone,
  },
  rules: {
    communityId: {
      type: "number",
      required: true,
      message: "居住地请选择所属社区",
      trigger: ["blur", "change"],
    },
    subdistrict: {
      type: "string",
      required: true,
      message: "居住地请选择街路巷",
      trigger: ["blur", "change"],
    },
    buildingId: {
      type: "number",
      required: true,
      message: "居住地请选择门楼牌号",
      trigger: ["blur", "change"],
    },
    phonenumber: [
      {
        type: "string",
        required: true,
        message: "请填写手机号码",
        trigger: ["blur", "change"],
      },
      {
        validator: (rule: any, value: any, callback: any) => {
          return uni.$u.test.mobile(value);
        },
        message: "手机号码不正确",
        trigger: ["change", "blur"],
      },
    ],
  },
});
const {
  showCommunity,
  communitys,
  showStreet,
  streets,
  showPlot,
  plots,
  showBuild,
  buildings,
  form,
  rules,
} = toRefs(data);

onLoad(() => {
  getCommunityList();
  getAlleyList();
  getPlotList();
  getBuildingList();
});

// 获取社区下拉数据
const getCommunityList = () => {
  communityGroup()
    .then((res: any) => {
      const { data } = res;
      communitys.value = data ?? [];
    })
    .catch((err: any) => {
      uToastRef.value.show({
        type: "error",
        message: err,
      });
    });
};
// 获取街路巷数据
const getAlleyList = () => {
  selectAlleyList({ communityId: form.value.communityId })
    .then((res: any) => {
      const { data } = res;
      streets.value = data ?? [];
      if (streets.value.length) {
        streets.value = streets.value.map((item: any) => {
          item.name = item.alleyName;
          return item;
        });
      }
    })
    .catch((err: any) => {
      uToastRef.value.show({
        type: "error",
        message: err,
      });
    });
};
// 获取小区数据
const getPlotList = () => {
  if (form.value.alleyId) {
    selectSubdistrictList({ alleyId: form.value.alleyId })
      .then((res: any) => {
        const { data } = res;
        plots.value = data ?? [];
        if (plots.value.length) {
          plots.value = plots.value.map((item: any) => {
            item.name = item.subdistrictName;
            return item;
          });
        }
      })
      .catch((err: any) => {
        uToastRef.value.show({
          type: "error",
          message: err,
        });
      });
  }
};
// 获取门楼牌号数据
const getBuildingList = () => {
  selectBuildingList({
    alleyId: form.value.alleyId,
    subId: form.value.subdistrictId ? form.value.subdistrictId : "",
  })
    .then((res: any) => {
      const { data } = res;
      buildings.value = data ?? [];
      if (buildings.value.length) {
        buildings.value = buildings.value.map((item: any) => {
          item.name = item.buildingName;
          return item;
        });
      }
    })
    .catch((err: any) => {
      uToastRef.value.show({
        type: "error",
        message: err,
      });
    });
};
// 社区选择
const communitySelect = (e: any) => {
  form.value.communityName = e.name;
  form.value.communityId = e.id;
  resetData(1);
  getAlleyList();
};
// 街路巷选择
const streetSelect = (e: any) => {
  form.value.alleyName = e.name;
  form.value.alleyId = e.id;
  resetData(2);
  getPlotList();
  getBuildingList();
};
// 小区选择
const plotSelect = (e: any) => {
  form.value.subdistrict = e.name;
  form.value.subdistrictId = e.id;
  resetData(3);
  getBuildingList();
};
// 门楼牌号选择
const buildSelect = (e: any) => {
  form.value.building = e.name;
  form.value.buildingId = e.id;
};

const resetData = (type: number) => {
  if (type <= 1) {
    form.value.alleyName = "";
    form.value.alleyId = "";
  }
  if (type <= 2) {
    form.value.subdistrict = "";
    form.value.subdistrictId = "";
  }
  if (type <= 3) {
    form.value.building = "";
    form.value.buildingId = "";
  }
};

// 保存
const onsubmit = () => {
  uForm.value
    .validate()
    .then((res: any) => {
      uni.showLoading({
        title: "提交中",
        mask: true,
      });
      updateCrowdUser(form.value)
        .then((res: any) => {
          uni.hideLoading();
          uToastRef.value.show({
            type: "success",
            message: "修改成功",
          });
          getCrowdUserInfo();
          let timer = setTimeout(() => {
            uni.navigateBack({
              delta: 1,
            });
            clearTimeout(timer);
          }, 1500);
        })
        .catch((err: any) => {
          uni.hideLoading();
          uToastRef.value.show({
            type: "error",
            message: err,
          });
        });
    })
    .catch(() => {});
};

// 获取群众个人信息
const getCrowdUserInfo = () => {
  crowdUserInfo({ crowdUserId: userInfoStore.userInfo.userId })
    .then((res: any) => {
      const { data } = res;
      userInfoStore.setCrowdInfo(data);
    })
    .catch((err: any) => {
      uToastRef.value.show({
        type: "error",
        message: err,
      });
    });
};

onReady(() => {
  uForm.value.setRules(rules.value);
});
</script>

<style lang="scss" scoped>
.edit-personal-info-form {
  ::v-deep .u-form-item:nth-last-child(3) {
    .u-form-item__body {
      flex-direction: column !important;
    }
  }
  ::v-deep .u-form-item:nth-last-child(2) .u-form-item__body {
    padding: 0;
  }
  ::v-deep .u-form-item:last-child {
    .u-form-item__body {
      flex-direction: column !important;
    }
  }
  ::v-deep {
    .u-radio-group {
      justify-content: flex-end;
      .u-radio:last-child {
        margin-left: 30rpx;
      }
    }
  }
  .disable-input {
    width: 24%;
    ::v-deep input {
      background: #e6e6e6;
      border: 1rpx solid #707070;
      border-radius: 8rpx;
      padding: 6rpx 10rpx;
    }
  }
  .select-input-bg-white {
    ::v-deep .u-input__content {
      background-color: #fff;
      border: 1rpx solid #707070;
      border-radius: 8rpx;
      padding: 6rpx 10rpx;
    }
  }
  .input-bg-white {
    ::v-deep input {
      background-color: #fff;
      border: 1rpx solid #707070;
      border-radius: 8rpx;
      padding: 6rpx 10rpx;
    }
  }
}

::v-deep .u-action-sheet__item-wrap {
  max-height: 50vh !important;
}
</style>
